import React from "react";
import { Input, Select } from "antd";
import { FilterOptions, Todo } from "../App";
import "./TodoFilter.css";

interface TodoFilterProps {
  filters: FilterOptions;
  onFilterChange: (filters: FilterOptions) => void;
  todos: Todo[];
}

const { Option } = Select;

const TodoFilter: React.FC<TodoFilterProps> = ({
  filters,
  onFilterChange,
  todos,
}) => {
  const allTags = Array.from(new Set(todos.flatMap((todo) => todo.tags)));

  const handleChange = (key: keyof FilterOptions, value: string | string[]) => {
    onFilterChange({
      ...filters,
      [key]: value,
    });
  };

  return (
    <div className="todo-filter">
      <Input
        value={filters.search}
        onChange={(e) => handleChange("search", e.target.value)}
        placeholder="搜索待办事项..."
        className="search-input"
      />
      <div className="filter-row">
        <Select
          value={filters.priority}
          onChange={(value) => handleChange("priority", value)}
          className="filter-select"
        >
          <Option value="all">全部优先级</Option>
          <Option value="low">低</Option>
          <Option value="medium">中</Option>
          <Option value="high">高</Option>
        </Select>
        <Select
          value={filters.completed}
          onChange={(value) => handleChange("completed", value)}
          className="filter-select"
        >
          <Option value="all">全部状态</Option>
          <Option value="completed">已完成</Option>
          <Option value="active">未完成</Option>
        </Select>
        <Select
          mode="multiple"
          allowClear
          placeholder="按标签筛选"
          value={filters.tags}
          onChange={(value) => handleChange("tags", value)}
          className="tag-filter"
        >
          {allTags.map((tag) => (
            <Option key={tag} value={tag}>
              {tag}
            </Option>
          ))}
        </Select>
      </div>
    </div>
  );
};

export default TodoFilter;
